<template>
  <div>
    <!-- 网格布局部分 -->
    <div class="grid-layout">
      <div
        v-for="(item, index) in gridItems"
        :key="index"
        class="grid-item"
        :class="{ highlight: item.isHighlighted, occupied: item.content }"
        :style="getGridItemStyle(item, index)"
        @dragover.prevent="onDragOver(index)"
        @drop="onDrop(index, $event)"
        @dragleave="onDragLeave(index)"
        draggable="true"
        @dragstart="handleDragStartFromGrid(item, index, $event)"
        @dragend="onDragEnd"
      >
        <div v-if="item.content" draggable="true">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import DraggableModule from "./DraggableModule.vue";

export default {
  components: {
    DraggableModule,
  },
  data() {
    return {
      modules: [
        { content: "模块1", rows: 1, cols: 1 },
        { content: "模块2", rows: 1, cols: 2 },
        { content: "模块3", rows: 2, cols: 1 },
        { content: "模块4", rows: 2, cols: 2 },
      ],
    };
  },
  computed: {
    ...mapState(["gridItems", "draggedItem"]),
  },
  methods: {
    ...mapActions(["startDrag", "dragOver", "dropItem", "resetHighlight"]),

    handleDragStart(module) {
      this.startDrag(module);
    },

    handleDragStartFromGrid(item, index, event) {
      console.log(item);

      // 设置拖拽的 dataTransfer 数据
      event.dataTransfer.effectAllowed = "move"; // 让拖拽时光标显示为"移动"
      event.dataTransfer.setData("text/plain", JSON.stringify({ index }));
      // 创建一个临时对象来表示正在拖拽的模块
      const module = {
        content: item.content,
        rows: item.rowStart,
        cols: item.colStart,
        index: index,
      };
      this.startDrag(module);

      this.onDragStartInGrid(index);
    },

    onDragStartInGrid(index) {
      // 清除原位置的内容
      this.$store.dispatch("clearOriginalPosition", index);
    },

    onDragOver(index) {
      if (this.draggedItem) {
        const row = Math.floor(index / 4);
        const col = index % 4;

        // 调用 Vuex store 中的 canPlaceModule 方法
        const result = this.$store.getters.canPlaceModule(
          row,
          col,
          this.draggedItem.rows,
          this.draggedItem.cols
        );

        if (result.success) {
          this.dragOver({ newIndex: index });
        } else {
          this.resetHighlight();
        }
      }
    },

    onDrop(index, event) {
      if (this.draggedItem) {
        this.$store.dispatch("dropItem", {
          newIndex: index,
          draggedItem: this.draggedItem,
        });
        console.log(this.draggedItem, "当前拖拽");

        const row = Math.floor(index / 4);
        const col = index % 4;

        // 调用 Vuex store 中的 canPlaceModule 方法
        const result = this.$store.getters.canPlaceModule(
          row,
          col,
          this.draggedItem.rows,
          this.draggedItem.cols
        );

        if (result.success) {
          this.dropItem({ newIndex: index });
        } else {
          this.resetHighlight();
        }
      }
    },

    onDragLeave(index) {
      // 当鼠标离开当前网格项时，重置高亮状态
      this.resetHighlight();
    },

    onDragEnd(event) {
      this.resetHighlight();
    },

    resetHighlight() {
      this.$store.dispatch("resetHighlight");
    },

    getGridItemStyle(item, index) {
      const row = Math.floor(index / 4);
      const col = index % 4;

      if (item.content) {
        return {
          gridColumnStart: item.colStart,
          gridColumnEnd: item.colEnd,
          gridRowStart: item.rowStart,
          gridRowEnd: item.rowEnd,
          backgroundColor: "#b2dfdb",
          border: "1px solid #ccc",
        };
      }

      if (item.isHighlighted) {
        return {
          gridColumnStart: col + 1,
          gridColumnEnd: col + 2,
          gridRowStart: row + 1,
          gridRowEnd: row + 2,
          backgroundColor: "#e0f7fa",
          border: "2px dashed #007bff",
        };
      }

      return {
        gridColumnStart: col + 1,
        gridColumnEnd: col + 2,
        gridRowStart: row + 1,
        gridRowEnd: row + 2,
        backgroundColor: "#fff",
        border: "1px solid #ccc",
      };
    },
  },
};
</script>

<style scoped>
.module-list {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.module-list .draggable-module {
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: grab;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(4, 200px); /* 4列 */
  grid-template-rows: repeat(3, 200px); /* 3行 */
  gap: 5px; /* 增加网格间隙 */
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: background-color 0.3s ease, border 0.3s ease;
  cursor: grab;
}

.grid-item.highlight {
  border: 2px dashed #007bff;
  background-color: #e0f7fa;
}

.grid-item.occupied {
  background-color: #b2dfdb; /* 占用空间的背景颜色 */
}

.grid-item div {
  text-align: center;
}

.grid-item div:active {
  cursor: grabbing;
}
</style>
